<template>
    <div>
        <input type="text" v-model="searchValue">

        <NowPlaying v-slot:movie="myprops">
            <ul>
                <li v-for="(data, index) in myprops.mylist" :key="data.id">
                    <!-- <img :src="data.img" style="width: 100px;" /> -->
                    <div v-if="searchValue != '' && data.nm.includes(searchValue)" style="color: red;">
                        {{ data.nm }}
                    </div>
                    <div v-else>
                        {{ data.nm }}
                    </div>
                </li>
            </ul>
        </NowPlaying>
        <hr>

        <!-- 写法二：简写+解构赋值方式 -->
        <NowPlaying #movie="{ mylist }">
            <ul>
                <li v-for="{ nm, img, id } in mylist" :key="id">
                    <img :src="img" style="width: 100px;" />
                    <div v-if="searchValue != '' && nm.includes(searchValue)" style="color: red;">
                        {{ nm }}
                    </div>
                    <div v-else>
                        {{ nm }}
                    </div>
                </li>
            </ul>
        </NowPlaying>
    </div>
</template>
<script>
import NowPlaying from './NowPlaying.vue';

export default {
    components: {
        NowPlaying
    },
    data() {
        return {
            searchValue: ""
        }
    },
    computed: {

    }

}

</script>